import React, { Component } from 'react';

import './timeRotate.css';

class TimeRotate extends Component {
  initDate = new Date();

  dateUnit = ["年","月", "日", "时", "分", "秒"];
  
  /*
  * 获取当前月份的天数
  * param: <year> 当前年份
  * param: <month> 当前月份
  */
  mGetDate(year, month){
    var d = new Date(year, month, 0);
    return d.getDate();
  }

  /*
  * 获取表盘元素并设置各个时间的位置
  * param: <val> 当前时间, 例如当前月份
  * param: <totalNum> 总数
  */
  numCircle(val, totalNum) {
    let initSpan = [];
    const unitAngle = 360 / totalNum;
    for(let i = 0;i < totalNum;i++) {
      val += i;
      if(val < totalNum) {
        initSpan.push(val);
      } else if(val === totalNum && totalNum !== 60) {
        initSpan.push(val);
      } else {
        initSpan.push(val - totalNum);
      }
    }
    initSpan = initSpan.map((value, index) => {
        let negativeIndex = -index;
        if( totalNum === 12) {
          negativeIndex += 1;
        }
        return (
          <span key={negativeIndex} style={{transform: "rotate("+ (negativeIndex * unitAngle) +"deg)"}}>
            {value}
          </span>
        );
      }
    );
    return initSpan;
  }

  tick(type, rotate) {
    if(rotate === undefined) {
      rotate = this.state[type] + 360 / 60
    }
    let a = {};
    a[type] = rotate;
    this.setState(a);
  }

  constructor(props) {
    super(props);
    const monthDays = this.mGetDate(this.initDate.getFullYear(), this.initDate.getMonth());
    this.state = {
      year: this.initDate.getFullYear(), 
      month: this.numCircle(this.initDate.getMonth(), 12),
      day: this.numCircle(this.initDate.getDate(), monthDays), 
      hour: this.numCircle(this.initDate.getHours(), 24),
      minute: this.numCircle(this.initDate.getMinutes(), 60),
      second: this.numCircle(this.initDate.getSeconds(), 60),
      monthRotate: 0,
      dayRotate: 0,
      hourRotate: 0,
      minuteRotate: 0,
      secondRotate: 0,
    };
  }

  componentDidMount() {
    const initDate = new Date();
    let addSec = initDate.getSeconds();
    this.timerSec = setInterval(
      () => {
        this.tick('secondRotate')
        addSec++;
        if(addSec%60 === 0) {
          this.tick('minuteRotate')
        }
        if(addSec%3600 === 0) {
          const hourRotate = this.state.hourRotate + 360 / 24;
          this.tick('hourRotate', hourRotate)
        }
        if(addSec%86400 === 0) {
          const monthDays = this.mGetDate(this.initDate.getFullYear(), this.initDate.getMonth());
          const rotate = this.state.dayRotate + 360 / monthDays;
          this.tick('dayRotate', rotate)
        }
      },
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerSec);
  }

  render() {
    return (
      <div className="wrap">
        <div className="now">
          <ul>
            {this.dateUnit.map((unit, index) => <li key={index}>{unit}</li>)}
          </ul>
        </div>
        <div className="year circle">
          {this.state.year}
        </div>
        <div className="month circle" style={{transform: "rotate("+this.state.monthRotate+"deg)"}}>
          {this.state.month}
        </div>
        <div className="day circle" style={{transform: "rotate("+this.state.dayRotate+"deg)"}}>
          {this.state.day}
        </div>
        <div className="hour circle" style={{transform: "rotate("+this.state.hourRotate+"deg)"}}>
          {this.state.hour}
        </div>
        <div className="minute circle" style={{transform:"rotate("+this.state.minuteRotate+"deg)"}}>
          {this.state.minute}
        </div>
        <div className="second circle" style={{transform: "rotate("+this.state.secondRotate+"deg)"}}>
          {this.state.second}
        </div>
      </div>
    );
  }
}

export default TimeRotate;
